<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <include file = "Public/html/header.html" />
    <link href="__PUBLIC__/home/css/bootstrap.min.css" rel="stylesheet">
    <link href="__PUBLIC__/home/css/common.css" rel="stylesheet">
    <link href="__PUBLIC__/home/css/common.css" rel="stylesheet">

</head>
<body>

<div class="container">
    <div class="form-group">
        <div class="input-group col-xs-12">
            <form action="{:U('Sales/index')}" method="post" id="form1" >
                <div class="input-group-btn">
                    <select class="form-control" name="type" style="width: auto;height: 32px">
                        <option value="4" <if condition="$type eq 4 || $type eq ''">selected</if>>会员列表</option>
                        <option value="1" <if condition="$type eq 1">selected</if>>按员工统计</option>
                        <if condition="$sessionInfo['parent_id'] eq 0"><option value="2" <if condition="$type eq 2">selected</if>>按店铺统计</option></if>
                        <option value="3" <if condition="$type eq 3">selected</if>>按部门统计</option>
                    </select>
                    <input type="text" name="start_time" id="test16" class="form-control" placeholder="点击选择开始时间" style="width: 180px;" readonly value="{$start_time}">
                    <input type="text" name="end_time" id="test17" class="form-control" placeholder="点击选择结束时间" style="width: 180px;" readonly value="{$end_time}">
                    <span>
                        <input type="submit" class="btn btn-info" value="查询" onclick="return index()" />
                        <a class="btn btn-danger" href="{:U('Sales/index')}">清空</a>
                        <if condition="$type eq 1 || $type eq 2|| $type eq 3">
                        <input class="btn btn-success" onclick="return excel()" type="submit" value="导出Excel"/>
                        </if>
                    </span>
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <span>昨天新增会员：<strong>{$yesterday}</strong></span>
            <span>共新增会员：  <strong>{$totalMember}</strong></span>
            <span>集团推广会员数：  <strong>{$storeParent}</strong></span>
            <span>合计总额：  <strong>{$totalSales}</strong></span>
        </div>
    </div>
</div>
<!--<div id = "echartsDiv" style="width: 100%;height:80%;"></div>-->
<div class="container-fluid">

    <div class="row">
        <div class="col-lg-12">
            <h2></h2>
            <div class="">
                <if condition="$type eq 1">
                    <table class="table table-bordered table-hover table-striped" id="dataTables-date">
                        <thead>
                        <tr>
                            <th>排名</th>
                            <th>员工名称</th>
                            <th>所属店铺</th>
                            <th>所属部门</th>
                            <th>已成交数量</th>
                            <th>已成交金额</th>
                            <th>未成交数量</th>
                            <th>未成交金额</th>
                            <th>已取消订单数</th>
                            <th>已取消订单金额</th>
                            <th>已退款订单数</th>
                            <th>已退款订单金额</th>
                            <th>推广人数</th>
                        </tr>
                        </thead>
                        <tbody>
                            <foreach name="list" key="k" item="vo">
                                <tr>
                                    <td>{$k+1}</td>
                                    <td>{$vo.real_name}</td>
                                    <td>{$vo.s_name}</td>
                                    <td>{$vo.department_name|default='无'}</td>
                                    <td>{$vo.sales_count}</td>
                                    <td>{$vo.sales_money}</td>
                                    <td>{$vo.deal_count}</td>
                                    <td>{$vo.deal_money}</td>
                                    <td>{$vo.cancel_count}</td>
                                    <td>{$vo.cancel_money}</td>
                                    <td>{$vo.refund_count}</td>
                                    <td>{$vo.refund_money}</td>
                                    <td>{$vo.count}</td>
                                </tr>
                            </foreach>
                        </tbody>
                    </table>
                    <elseif condition="$type eq 2"/>
                    <table class="table table-bordered table-hover table-striped" id="dataTables-date">
                        <thead>
                        <tr>
                            <th>排名</th>
                            <th>店铺名称</th>
                            <th>上级店铺</th>
                            <th>已成交数量</th>
                            <th>已成交金额</th>
                            <th>未成交数量</th>
                            <th>未成交金额</th>
                            <th>已取消订单数</th>
                            <th>已取消订单金额</th>
                            <th>已退款订单数</th>
                            <th>已退款订单金额</th>
                            <th>推广人数</th>
                        </tr>
                        </thead>
                        <tbody>
                            <foreach name="list" key="k" item="vo">
                                <tr>
                                    <td>{$k+1}</td>
                                    <td>{$vo.store_name}</td>
                                    <td>{$sessionInfo['store_name']}</td>
                                    <td>{$vo.sales_count}</td>
                                    <td>{$vo.sales_money}</td>
                                    <td>{$vo.deal_count}</td>
                                    <td>{$vo.deal_money}</td>
                                    <td>{$vo.cancel_count}</td>
                                    <td>{$vo.cancel_money}</td>
                                    <td>{$vo.refund_count}</td>
                                    <td>{$vo.refund_money}</td>
                                    <td>{$vo.count}</td>
                                </tr>
                            </foreach>
                        </tbody>
                    </table>
                    <elseif condition="$type eq 3"/>
                    <table class="table table-bordered table-hover table-striped" id="dataTables-date">
                        <thead>
                        <tr>
                            <th>排名</th>
                            <th>部门名称</th>
                            <th>所属店铺</th>
                            <th>已成交数量</th>
                            <th>已成交金额</th>
                            <th>未成交数量</th>
                            <th>未成交金额</th>
                            <th>已取消订单数</th>
                            <th>已取消订单金额</th>
                            <th>已退款订单数</th>
                            <th>已退款订单金额</th>
                            <th>推广人数</th>
                        </tr>
                        </thead>
                        <tbody>
                        <foreach name="list" key="k" item="vo">
                            <tr>
                                <td>{$k+1}</td>
                                <td>{$vo.department_name}</td>
                                <td>{$vo.store_name}</td>
                                <td>{$vo.sales_count}</td>
                                <td>{$vo.sales_money}</td>
                                <td>{$vo.deal_count}</td>
                                <td>{$vo.deal_money}</td>
                                <td>{$vo.cancel_count}</td>
                                <td>{$vo.cancel_money}</td>
                                <td>{$vo.refund_count}</td>
                                <td>{$vo.refund_money}</td>
                                <td>{$vo.count}</td>
                            </tr>
                        </foreach>
                        </tbody>
                    </table>
                    <else/>
                    <table class="table table-bordered table-hover table-striped" id="dataTables-date">
                        <thead>
                        <tr>
                            <th>id</th>
                            <th>会员名称</th>
                            <th>会员手机号</th>
                            <th>注册时间</th>
                            <th>归属店铺</th>
                            <th>推荐人</th>
                            <th>已成交金额</th>
                            <th>已成交订单数</th>
                        </tr>
                        </thead>
                        <tbody>
                        <foreach name="list" key="k" item="vo">
                            <tr>
                                <td>{$k+1}</td>
                                <td>{$vo.user_name}</td>
                                <td>{$vo.phone_mob}</td>
                                <td>{$vo.reg_time|date="Y-m-d H:i",###}</td>
                                <td>{$vo.s_name}</td>
                                <td>{$vo.referInfo.user_name}|{$vo.referInfo.real_name}</td>
                                <td>{$vo.orderTotal}
                                <td>{$vo.orderCount}</td>
                            </tr>
                        </foreach>
                        </tbody>
                    </table>
                </if>
            </div>
        </div>
    </div>
    <div class="pages">
        {$page}
    </div>
</div>

</body>
<include file = "Public/html/footer.html" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script src="Public/home/js/laydate/laydate.js"></script>
<script>
    function index(){
        $("#form1").attr('action',"{:U('Sales/index')}");
        return true;
    }
    function excel(){
        $("#form1").attr('action',"{:U('Sales/excel')}");
        return true;
    }

    laydate.render({
        elem: '#test16'
        ,type: 'datetime'
    });
 laydate.render({
        elem: '#test17'
        ,type: 'datetime'
    });

</script>
<input type="hidden" name="json_arr_money" value='{$total_sales.json_arr_money}'>
<input type="hidden" name="json_arr_count" value='{$total_sales.json_arr_count}'>
<input type="hidden" name="json_department_count" value='{$total_sales.json_department_count}'>
<input type="hidden" name="json_department_money" value='{$total_sales.json_department_money}'>
<script>


    var myChart = echarts.init(document.getElementById('echartsDiv'));
    var json_arr_count = $("input[name=json_arr_count]").val();
    var count_json = JSON.parse(json_arr_count);
    var count_json2 = JSON.parse(count_json);
    // app.title = '坐标轴刻度与标签对齐';
    //店铺销售量
    var builderJson = {
        'all' : {$total_sales.json_arr_total},
        'charts' :count_json2,
        "components": {
        }
    };

    //店铺销售额
    var str = $("input[name=json_arr_money]").val();
    var json1 = JSON.parse(str)
    var json2 = JSON.parse(json1)
    var downloadJson =json2;

    //部门销售量
    var json_department_money = $("input[name=json_department_money]").val();
    var department_money_json = JSON.parse(json_department_money);
    var department_money_json2 = JSON.parse(department_money_json);
    var themeJson = department_money_json2;

    //部门销售额
    var json_department_count = $("input[name=json_department_count]").val();
    var department_count_json = JSON.parse(json_department_count);
    var department_count_json2 = JSON.parse(department_count_json);
    var themeJson1 = department_count_json2;

    var waterMarkText = 'ECHARTS';

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = 50;
    canvas.height = 500;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.globalAlpha =0;
    ctx.font = '1px Microsoft Yahei';
    ctx.translate(50, 50);
    ctx.rotate(-Math.PI / 4);
    ctx.fillText(waterMarkText, 0, 0);

    var option = {
        backgroundColor: {
            type: 'pattern',
            image: canvas,
            repeat: 'repeat'
        },
        tooltip: {},
        title: [{
            text: '店铺销售量',
            subtext: '总计 ' + builderJson.all,
            left: '25%',
            textAlign: 'center'
        },{
            text: '店铺销售额',
            subtext: '总计 ' + Object.keys(downloadJson).reduce(function (all, key) {
                return Math.ceil((all + downloadJson[key]) *1000)/1000;
            }, 0),
            left: '75%',
            textAlign: 'center'
        }, {
            text: '部门销售额',
            subtext: '总计 ' + Object.keys(themeJson).reduce(function (all, key) {
                return Math.ceil((all + themeJson[key]) *1000)/1000;
            }, 0),
            left: '75%',
            top: '55%',
            textAlign: 'center'
        }, {
            text: '部门销售量',
            subtext: '总计 ' + Object.keys(themeJson1).reduce(function (all, key) {
                return Math.ceil((all + themeJson1[key]) *1000)/1000;
            }, 0),
            left: '25%',
            top: '55%',
            textAlign: 'center'
        }],
        grid: [{
            top: 50,
            width: '50%',
            bottom: '45%',
            left: 10,
            containLabel: true
        }, {
            top: '55%',
            width: '50%',
            bottom: 0,
            left: 10,
            containLabel: true
        }],
        xAxis: [{
            type: 'value',
            max: builderJson.all,
            splitLine: {
                show: false
            }
        }, {
            type: 'value',
            max: builderJson.all,
            gridIndex: 1,
            splitLine: {
                show: false
            }
        }],
        yAxis: [{
            type: 'category',
            data: Object.keys(builderJson.charts),
            axisLabel: {
                interval: 0,
                rotate: 30
            },
            splitLine: {
                show: false
            }
        }, {
            gridIndex: 1,
            type: 'category',
            data: Object.keys(builderJson.components),
            axisLabel: {
                interval: 0,
                rotate: 30
            },
            splitLine: {
                show: false
            }
        }],
        series: [{
            type: 'bar',
            stack: 'chart',
            z: 3,
            label: {
                normal: {
                    position: 'right',
                    show: true
                }
            },
            data: Object.keys(builderJson.charts).map(function (key) {
                return builderJson.charts[key];
            })
        }, {
            type: 'bar',
            stack: 'chart',
            silent: true,
            itemStyle: {
                normal: {
                    color: '#eee'
                }
            },
            data: Object.keys(builderJson.charts).map(function (key) {
                return builderJson.all - builderJson.charts[key];
            })
        }, {
            type: 'bar',
            stack: 'component',
            xAxisIndex: 1,
            yAxisIndex: 1,
            z: 3,
            label: {
                normal: {
                    position: 'right',
                    show: true
                }
            },
            data: Object.keys(builderJson.components).map(function (key) {
                return builderJson.components[key];
            })
        }, {
            type: 'bar',
            stack: 'component',
            silent: true,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
                normal: {
                    color: '#eee'
                }
            },
            data: Object.keys(builderJson.components).map(function (key) {
                return builderJson.all - builderJson.components[key];
            })
        }, {
            type: 'pie',
            radius: [0, '30%'],
            center: ['75%', '38%'],
            data: Object.keys(downloadJson).map(function (key) {
                return {
                    name: key.replace('.js', ''),
                    value: downloadJson[key]
                }
            })
        }, {
            type: 'pie',
            radius: [0, '30%'],
            center: ['25%', '85%'],
            data: Object.keys(themeJson1).map(function (key) {
                return {
                    name: key.replace('.js', ''),
                    value: themeJson1[key]
                };
            })
        }, {
            type: 'pie',
            radius: [0, '30%'],
            center: ['75%', '85%'],
            data: Object.keys(themeJson).map(function (key) {
                return {
                    name: key.replace('.js', ''),
                    value: themeJson[key]
                };
            })
        }]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

</script>

</html>